<template>
	<div>
		<header-top></header-top>
		<div class="detail-content">
			<div class="main-width">
				<div class="category-breadcrumb">
					<router-link tag="a" class="category-breadcrumb-default" :to="{name: 'Category', query: {levelOne: '', levelTwo: '', levelThree: '', keyWord: '', selectType: '', brandId: '' }}">全部商品</router-link>
					<span v-for="(item, index) in category" >
						<router-link tag="a" v-if="item.deep == 1" class="category-breadcrumb-default" :to="{name: 'Category', query: {levelOne: item.id, levelTwo: '', levelThree: '', keyWord: '', selectType: '', brandId: '' }}">{{item.name}}</router-link>
						<router-link tag="a" v-else-if="item.deep == 2" class="category-breadcrumb-default" :to="{name: 'Category', query: {levelOne: category[index-1].id, levelTwo: item.id, levelThree: '', keyWord: '', selectType: '', brandId: '' }}">{{item.name}}</router-link>
						<router-link tag="a" v-else-if="item.deep == 3" class="category-breadcrumb-default" :to="{name: 'Category', query: {levelOne: category[index-2].id, levelTwo: category[index-1].id, levelThree: item.id, keyWord: '', selectType: '', brandId: '' }}">{{item.name}}</router-link>
					</span>						
					<a class="category-breadcrumb-default category-breadcrumb-last">商品详情</a>
				</div>
				<div class="detail-goods-info productContent">
					<div class="detail-goods-img">
						<div class="view">
							<div class="swiper-container gallery-top">
						        <div class="swiper-wrapper">
						           <div class="swiper-slide" v-for="(item, index) in goodsInfo.goodsNavigateList" :class="{'active-nav': index==0}"><img :src="imgAddress + item.navigateImage" @error="error(1)" /></div>
						        </div>
						    </div>
					    </div>
					    <div class="preview">
					    	<div class="arrow-left"></div>
						    <div class="arrow-right"></div>
						    <div class="swiper-container gallery-thumbs">
						        <div class="swiper-wrapper">
						            <div class="swiper-slide" v-for="(item, index) in goodsInfo.goodsNavigateList" :class="{'active-nav': index==0}"><img :src="imgAddress + item.navigateImage" @error="error(1)" /></div>
						        </div>
						    </div>
					    </div>
					</div>
					<div class="detail-goods-text">
						<div class="detail-goods-code">
							商品编码：<span>{{goodsInfo.goodsCode}}</span>
						</div>
						<div class="detail-goods-title channel-mendian" v-if="goodsInfo.channel==1">
							{{goodsInfo.goodsName}}
						</div>
						<div class="detail-goods-title channel-dianshang" v-else-if="goodsInfo.channel==2">
							{{goodsInfo.goodsName}}
						</div>
						<div class="detail-goods-title channel-haitao" v-else>
							{{goodsInfo.goodsName}}
						</div>
						<div class="detail-goods-name channel-xiaolaing" @click="goIfdone">
							累计总销量<span>{{goodsInfo.saleCount}}</span>件
						</div>
						<div class="detail-goods-name">
							品牌名称：<span>{{goodsInfo.brandName}}</span>
						</div>
						<div class="detail-goods-name">
							所属分类：
							<span v-for="(item, index) in category" >
								<router-link tag="a" v-if="item.deep == 1" class="category-breadcrumb-default" :to="{name: 'Category', query: {levelOne: item.id, levelTwo: '', levelThree: '', keyWord: '', selectType: '', brandId: '' }}">{{item.name}}</router-link>
								<router-link tag="a" v-else-if="item.deep == 2" class="category-breadcrumb-default" :to="{name: 'Category', query: {levelOne: category[index-1].id, levelTwo: item.id, levelThree: '', keyWord: '', selectType: '', brandId: '' }}">{{item.name}}</router-link>
								<router-link tag="a" v-else-if="item.deep == 3" class="category-breadcrumb-default" :to="{name: 'Category', query: {levelOne: category[index-2].id, levelTwo: category[index-1].id, levelThree: item.id, keyWord: '', selectType: '', brandId: '' }}">{{item.name}}</router-link>
							</span>
						</div>
						<div class="detail-goods-price">
							建议售价：<span class="detail-goods-price-num">¥{{goodsInfo.suggestPrice/100}}</span>
						</div>
						<div class="detail-goods-time">
							上架时间：<span>{{goodsInfo.onLineTime}}</span>
							下架时间：<span>{{goodsInfo.offLineTime}}</span>
						</div>
						<div class="detail-goods-btn-default">
							<span class="bg-color-gray cursor-pointer" v-if="hskc == true">暂无库存</span>
							<span class="bg-color-orange cursor-pointer" @click="addGoodsAll(1)" v-else-if="taxActive == true">一键含税上架</span>
							<span class="bg-color-gray cursor-pointer" v-else>一键含税上架</span>
							<span class="bg-color-gray cursor-pointer" v-if="bhskc == true">暂无库存</span>
							<span class="bg-color-red cursor-pointer" @click="addGoodsAll(0)" v-else-if="isNoTaxActive == true">一键不含税架</span>
							<span class="bg-color-gray cursor-pointer" v-else>一键不含税上架</span>
						</div>
					</div>
					<div class="detail-brandInfo">
						<div class="detail-brandInfo-title"><span>品牌介绍</span></div>
						<div class="detail-brandInfo-logo">
							<img :src="imgAddress + brand.backgroundImagePath" @error="error(3)"/>
							<img :src="imgAddress + brand.logoPath" class="deatil-brand-logo" @error="error(4)"/>
						</div>
						<div class="detail-brandInfo-name">
							<span>{{brand.nameEn}}</span>
							<span>{{brand.nameCn}}</span>
						</div>
						<div class="detail-brandInfo-interduce">
							<div>
								{{brand.descriptions}}
							</div>
						</div>
						<div class="detail-brandInfo-link">
							<router-link tag="a" :to="{name: 'Category', query: { levelOne: '', levelTwo: '', levelThree: '', keyWord: '', selectType: '', brandId: brand.brandId }}">走进品牌</router-link>
						</div>
					</div>
				</div>
				<div class="detail-allGoods-line"></div>
				<div>
					<table class="detail-goods-table">
						<thead>
							<tr>
								<th colspan="2" class="table-header-level-one header-SKU">SKU规格</th>
								<th colspan="4" class="table-header-level-one header-nosupplier">不含税供应商</th>
								<th colspan="5" class="table-header-level-one header-supplier">含税供应商</th>
							</tr>
							<tr>
								<th class="header-type-one">规格</th>
								<th class="header-type-one">建议最低售价</th>
								<th class="header-type-two"><div>最低结算价</div><div>(+运费)</div></th>
								<th class="header-type-two">发票</th>
								<th class="header-type-two">库存</th>
								<th class="header-type-two">选择</th>
								<th class="header-type-three"><div>不含税结算价</div><div>(+运费)</div></th>
								<th class="header-type-three"><div>最低含税结算价</div><div>(+运费)</div></th>
								<th class="header-type-three">发票</th>
								<th class="header-type-three">库存</th>
								<th class="header-type-three">选择</th>
							</tr>
						</thead>
						<tbody v-for="(item, index) in tableInfo">
							<tr>
								<td class="body-type-one body-standard">
									<div class="body-standard-content">
										<div class="body-standard-img">
											<img :src="imgAddress + item.imagePath" @error="error(1)"/>
										</div>																			
									</div>
									{{item.specName}}
								</td>
								<td class="body-type-one">{{item.salePrice/100}}</td>
								<td class="body-type-two">{{item.settmentPrice/100}}<span class="freight-price">(+{{item.freight/100}})</span></td>
								<td class="body-type-two">无</td>
								<td class="body-type-two">{{item.inventoryNum}}</td>
								<td class="body-type-two body-btn">
									<div class="body-btn-default body-btn-select cursor-pointer" v-if="item.noTaxShelves == 1">已生效</div>										
									<div class="body-btn-default body-btn-select cursor-pointer" v-else-if="item.noTaxShelves == 2">已加入货架</div>
									<div class="body-btn-default body-btn-select cursor-pointer" v-else-if="item.noTaxShelves == 3">暂无库存</div>
									<div class="body-btn-default body-btn-select cursor-pointer" v-else-if="item.noTaxShelves == 4">暂无库存</div>
									<div class="body-btn-default cursor-pointer" v-else-if="item.noTaxShelves == 0&&item.inventoryNum > 0" @click="addGoods(index, 0, item.productId, item.activityDetailId)">加入货架</div>	
									<div class="body-btn-default body-btn-select cursor-pointer" v-else>暂无库存</div>	
								</td>
								<td class="body-type-three">{{item.noTaxSettlementPrice/100}}<span class="freight-price">(+{{item.freight/100}})</span></td>
								<td class="body-type-three">{{item.taxSettlementPrice/100}}<span class="freight-price">(+{{item.freight/100}})</span></td>
								<td class="body-type-three">有</td>
								<td class="body-type-three">{{item.taxInventoryNum}}</td>
								<td class="body-type-three body-btn">
									<div class="body-btn-default body-btn-select cursor-pointer" v-if="item.taxShelves == 1">已生效</div>										
									<div class="body-btn-default body-btn-select cursor-pointer" v-else-if="item.taxShelves == 2">已加入货架</div>
									<div class="body-btn-default body-btn-select cursor-pointer" v-else-if="item.taxShelves == 3">暂无库存</div>
									<div class="body-btn-default body-btn-select cursor-pointer" v-else-if="item.taxShelves == 4">暂无库存</div>
									<div class="body-btn-default cursor-pointer" v-else-if="item.taxShelves == 0&&item.taxInventoryNum > 0" @click="addGoods(index, 1, item.productId, item.activityDetailId)">加入货架</div>
									<div class="body-btn-default body-btn-select cursor-pointer" v-else>暂无库存</div>	
								</td>
							</tr>
						</tbody>
					</table>
				</div>
				<div class="detail-goods-line"></div>
				<div v-for="item in goodsInfo.goodsDetailList">
					<div class="detail-goods-bimage">
						<img v-bind:src="imgAddress + item.imagePath" @error="error(1)"/>
					</div>
				</div>

				<!-- 销量列表 start -->
				<div v-if="skuSale.salesInfo.length > 0" class="detail-goods-line ifdone" id="ifdone"></div>
				<div v-if="skuSale.salesInfo.length > 0" class="detail-goods-ifdone">
					<el-table
					    :data="skuSale.salesInfo"
					    stripe
					    :border="false"
					    class="detail-goods-ifdone"
					    style="width: 1279px">
					    <el-table-column
					      prop="platformName"
					      label="采购商">
					    </el-table-column>
					    <el-table-column
					      prop="specName"
					      label="商品规格">
					    </el-table-column>
					    <el-table-column
					      prop="quantity"
					      label="数量">
					    </el-table-column>
					    <el-table-column
					      prop="transactionTime"
					      label="成交时间">
					    </el-table-column>
					</el-table>
					<div class="block">
						<el-pagination
						    layout="prev, pager, next"
						    @current-change="handleCurrentChange"
						    :current-page.sync="skuSale.pageNum" 
						    :total="skuSale.total" 
						    :page-size="skuSale.pageSize">
						</el-pagination>
					</div>
					
				</div>
				<!-- 销量列表 end -->

			</div>
		</div>
	</div>
</template>
<script>
	import headerTop from '../components/Header'
	import store from '../store/index.js'
	import Swiper from 'swiper'
	import 'swiper/dist/css/swiper.css'
	import {goodsInfo, productInfo, addShelves, getSkuSaleVolume, imgAddress} from '../config/interface.js'
	import {toast, imageError} from '../util/tool.js'
	import {fetch} from '../config/fetch.js'
	import router from '../router/index.js'
	import Jquery from 'jquery'
	import {mapActions} from 'vuex'

	export default {
		data(){
			return {
				goodsInfo: {},
    			tableInfo: {},
    			navigateImages: {},
    			goodsId: '',
    			userId: store.state.userId,
    			isNoTaxActive: false,
    			taxActive: false,
    			imgAddress: imgAddress,
	    		category: {},
	    		brand: {},
	    		hskc: true,
	    		bhskc: true,
	    		activityId: '',
	    		skuSale: {
	    			pageNum: 1,
	    			pageSize: 10,
	    			total: '',
	    			salesInfo: []
	    		}
			}
		},
		components: {
			headerTop
		},
		created(){
			this.goodsId = this.$route.query.goodsId;
			this.activityId = this.$route.query.activityId;
		},
		mounted(){
			this.init();
			this.tableInit();
			this.skuSaleInit();
		},
		methods: {
			...mapActions({ setGoodsCount: 'setGoodsCount' }),
			error(num){
				imageError(num, event);
			},
			init(){
				var data = {
	    			userId : this.userId,
	    			goodsId : this.goodsId,
	    			activityId : this.activityId
	    		};
	    		var url = goodsInfo;
	    		fetch(url, data)
				.then(res => {
					this.goodsInfo = res.data;
					this.brand = res.data.brand;
					var viewSwiper = new Swiper('.view .swiper-container', {
						observer: true,
						onSlideChangeStart: function() {
							updateNavPosition()
						}
					});	
					Jquery('.view .arrow-left,.preview .arrow-left').on('click', function(e) {
						e.preventDefault()
						if (viewSwiper.activeIndex == 0) {
							viewSwiper.swipeTo(viewSwiper.slides.length - 1, 1000);
							return
						}
						viewSwiper.slidePrev()
					})
					Jquery('.view .arrow-right,.preview .arrow-right').on('click', function(e) {
						e.preventDefault()
						if (viewSwiper.activeIndex == viewSwiper.slides.length - 1) {
							viewSwiper.slideTo(0, 1000);
							return
						}
						viewSwiper.slideNext()
					})
	
					var previewSwiper = new Swiper('.preview .swiper-container', {
						visibilityFullFit: true,
						slidesPerView: 'auto',
						onlyExternal: true,
						spaceBetween: 10,
						observer: true,
						onClick: function(event) {
							viewSwiper.slideTo(event.clickedIndex)
						}
					});
					
					function updateNavPosition() {
						Jquery('.preview .active-nav').removeClass('active-nav')
						var activeNav = Jquery('.preview .swiper-slide').eq(viewSwiper.activeIndex).addClass('active-nav')
						if (!activeNav.hasClass('swiper-slide-visible')) {
							if (activeNav.index() > previewSwiper.activeIndex) {
								var thumbsPerNav = Math.floor(previewSwiper.width / activeNav.width()) - 1
								previewSwiper.slideTo(activeNav.index() - thumbsPerNav)
							} else {
								previewSwiper.slideTo(activeNav.index())
							}
						}
					}


					this.goodsInfo.onLineTime = this.goodsInfo.onLineTime.substring(0,19);
					this.goodsInfo.offLineTime = this.goodsInfo.offLineTime.substring(0,19);								
					var arr = [];
					var categoryOne = {
						id: res.data.categoryOneId,
						deep: 1,
						name: res.data.categoryOneName
					};
					var categoryTwo = {
						id: res.data.categoryTwoId,
						deep: 2,
						name: res.data.categoryTwoName,
					};
					var categoryThree = {
						id: res.data.categoryThreeId,
						deep: 3,
						name: res.data.categoryThreeName
					}
					arr.push(categoryOne);
					arr.push(categoryTwo);
					arr.push(categoryThree);
					this.category = arr;
				});
			},
			tableInit(){
				var data = {
	    			userId : this.userId,
	    			goodsId : this.goodsId,
	    			activityId : this.activityId
	    		};
	    		var url = productInfo;
	    		fetch(url, data)
				.then(res => {
					
					this.tableInfo = res.data;
					this.navigateImages = res.data.goodsNavigateList;
					for(var i in this.tableInfo){
						if(this.tableInfo[i].taxShelves == 0 && this.tableInfo[i].taxInventoryNum > 0){
							this.taxActive = true;
						}
						if(this.tableInfo[i].taxInventoryNum > 0){
							this.hskc = false;
						}
						if(this.tableInfo[i].noTaxShelves == 0 && this.tableInfo[i].inventoryNum > 0){
							this.isNoTaxActive = true;
						}
						if(this.tableInfo[i].inventoryNum  > 0){
							this.bhskc = false;
						}
					}
				});
			},
			// 成交订单
			skuSaleInit(){
				var data = {
					pageNum: this.skuSale.pageNum,
					pageSize: this.skuSale.pageSize,
					goodsId : this.goodsId,
	    			userId : this.userId
	    		};
	    		var url = getSkuSaleVolume;
	    		fetch(url, data)
				.then(res => {
					let skuSale = res.data;
					let salesInfo = skuSale.salesInfo;
					let salesInfo_length = salesInfo.length;
					if(salesInfo_length > 0){
						salesInfo.forEach(function(value,index){
							value.transactionTime = value.transactionTime.substring(0,19);
						});

						this.skuSale.total = skuSale.count;
						this.skuSale.salesInfo = salesInfo;
					}

				})
			},
			addGoodsAll(num){
				var goodsList = [];
				var tableInfo = this.tableInfo;
				for(var i in tableInfo){
					var goodsItem = {};
					goodsItem.goodsId = this.goodsId;
					goodsItem.productId = tableInfo[i].productId;
					goodsItem.activityDetailId = tableInfo[i].activityDetailId;
					goodsItem.hasTax = num;
					goodsList.push(goodsItem);
				}
				if(num==1){
					this.taxActive = false;
				}else{
					this.isNoTaxActive = false;
				}
				var data = {
					goodsList: goodsList,
					userId: this.userId
				};
				var url = addShelves;
				fetch(url, data)
				.then(res => {
					if(res.code == 10000){
						var str = "上架成功";
	                    toast(str, 1, false);
	                    this.setGoodsCount();
	                    this.tableInit();
					}else{
						var str = "上架失败";
						toast(str, 2, false);
					}                   
                });
				
			},
			addGoods(index, tax, id, activityDetailId){					
				var goodsList = [];
				var goodsitem = {};
				var goodsItem = {};
				var tableInfo = this.tableInfo;
				goodsItem.goodsId = this.goodsId;
				goodsItem.productId = id;
				goodsItem.hasTax = tax;
				goodsItem.activityDetailId = activityDetailId;
				goodsList.push(goodsItem);
				var data = {
					goodsList: goodsList,
					userId: this.userId
				};
				var url = addShelves;
				fetch(url, data)
				.then(res => {
					if(res.code == 10000){
						var str = "上架成功";
	                    toast(str, 1, false);
	                    this.setGoodsCount();
	                    this.tableInit();
					}else{
						var str = "上架失败";
						toast(str, 2, false);
					}                   
                });
					
			},
			goIfdone() {
				if(this.skuSale.salesInfo.length > 0){
					document.querySelector('#ifdone').scrollIntoView(true);  
				}else{
					var str = '暂无成交订单';
					toast(str, 4, false);
					return;
				}
				
			}				
		}
	}
</script>
<style scoped>
	.swiper-container {
        width: 400px;
        height: 400px;
        margin-left: auto;
        margin-right: auto;
    }
    .swiper-slide {
        background-size: cover;
        background-position: center;
    }
    .gallery-top {
        height: 400px;
        width: 400px;
    }
    .gallery-top .swiper-slide{
    		border: 0 !important;
    }
    .gallery-top .swiper-slide img {
    		width: 400px;
    		height: 400px;
    }
    .preview {
		width: 100%;
		position: relative;
		margin-top: 23px;
	}			
	.preview .swiper-container {
		width: 330px;
		height: 72px;
		margin-left: 35px;
	}			
	.preview .swiper-slide {
		width: 82px;
		height: 72px;
	}	
	.preview img {
		padding: 1px;
		height: 70px;
		width: 70px;
	}
			
	.preview .active-nav img {
		padding: 0;
		border: 1px solid #FEA923;
	}
</style>